<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SpiderMonitor</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="../dist/css/common/bootstrap.css">
<!-- font-awsome -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> -->
<!-- Ionicons -->
<link rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../dist/css/common/AdminLTE.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet"
	href="../dist/css/common/skins/_all-skins.min.css">
<link rel="stylesheet" href="../dist/css/common/skins/skin-green.css">
<!-- iCheck -->
<link rel="stylesheet" href="../dist/plugins/iCheck/flat/blue.css">
<!-- Morris chart -->
<link rel="stylesheet" href="../dist/plugins/morris/morris.css">
<!-- jvectormap -->
<link rel="stylesheet"
	href="../dist/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<!-- Date Picker -->
<link rel="stylesheet" href="../dist/plugins/datepicker/datepicker3.css">
<!-- Daterange picker -->
<link rel="stylesheet"
	href="../dist/plugins/daterangepicker/daterangepicker.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet"
	href="../dist/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

<!-- 字体图标和iconfont -->
<!-- Font Awesome -->
<link rel="stylesheet" href="../dist/css/common/font-awesome.css">
<!-- iconfont字体图标 -->
<link rel="stylesheet"
	href="../dist/css/common/portalInFrame-iconfont.css">
<link rel="stylesheet"
	href="../dist/css/spiderMonitor/spiderMonitor.css" />
<link rel="stylesheet" href="../dist/css/kafkaMonitor/kafkaMonitor.css" />
<script
	src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="kafka-app" class="hold-transition skin-green sidebar-mini">
	<div class="wrapper">

		<header class="main-header">
			<!-- Logo -->
			<a href="#" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels -->
				<span class="logo-mini"> <!-- <i class="iconfont">&#xe60e;</i> -->S·M
			</span> <!-- logo for regular state and mobile devices --> <span
				class="logo-lg"><b>SpiderMonitor</b></span>
			</a>
			<!-- Header Navbar: style can be found in header.less -->
			<nav class="navbar navbar-static-top">
				<!-- Sidebar toggle button-->
				<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
					role="button"> <span class="sr-only">Toggle navigation</span>
				</a>

				<div class="navbar-custom-menu">
					<ul class="nav navbar-nav">
						<!-- Messages: style can be found in dropdown.less-->
						<li class="dropdown messages-menu"><a href="#"
							class="dropdown-toggle" data-toggle="dropdown"> <i
								class="icon icon-envelope"></i> <!-- <span class="label label-success">4</span> -->
						</a></li>
						<!-- Notifications: style can be found in dropdown.less -->
						<li class="dropdown notifications-menu"><a href="#"
							class="dropdown-toggle" data-toggle="dropdown"> <i
								class="icon icon-bell"></i> <!-- <span class="label label-warning">10</span> -->
						</a></li>
						<!-- Tasks: style can be found in dropdown.less -->
						<li class="dropdown tasks-menu"><a href="#"
							class="dropdown-toggle" data-toggle="dropdown"> <i
								class="icon icon-flag"></i> <!-- <span class="label label-danger">9</span> -->
						</a></li>

						<!-- Control Sidebar Toggle Button -->
						<li><a href="#" data-toggle="control-sidebar"><i
								class="icon icon-gears"></i></a></li>
					</ul>
				</div>
			</nav>
		</header>
		<!-- Left side column. contains the logo and sidebar -->
		<aside class="main-sidebar">
			<!-- sidebar: style can be found in sidebar.less -->
			<section class="sidebar">
				<!-- search form -->
				<form action="#" method="get" class="sidebar-form">
					<div class="input-group">
						<input type="text" name="q" class="form-control"
							placeholder="Search..."> <span class="input-group-btn">
							<button type="submit" name="search" id="search-btn"
								class="btn btn-flat">
								<i class="icon icon-search"></i>
							</button>
						</span>
					</div>
				</form>
				<!-- /.search form -->
				<!-- sidebar menu: : style can be found in sidebar.less -->
				<ul class="sidebar-menu">
					<li class="header"></li>
					<li class="active treeview"><a href=""
						style="font-size: 18px;"> <i class="iconfont">&#xe63b;</i>&nbsp;&nbsp;<span>SpiderMonitor</span>
					</a>
						<ul class="treeview-menu">
							<li class="active"><a
								href="../kafkaMonitor/kafka-index.html"> <i class="iconfont">&#xe6e8;</i>&nbsp;&nbsp;<span>KafkaMonitor</span>
									<span class="pull-right-container"> <i
										class="fa fa-angle-left pull-right"></i>
								</span>
							</a> <!-- <ul class="treeview-menu menu-open">
					<li>
						<a href="../kafkaMonitor/kafka-consGroups.html"><i class="fa fa-circle-o iconfont">&#xe601;</i>Consumer Groups</a>
					</li>
					<li>
						<a href="../kafkaMonitor/kafka-topiclist.html"><i class="fa fa-circle-o iconfont">&#xe601;</i>Topic List</a>
					</li>
					<li>
						<a href=""><i class="fa fa-circle-o iconfont">&#xe601;</i>Visualizations</a>
					</li>
				</ul> --></li>
							<!--  <li class="active"><a href="">
            	<i class="iconfont">&#xe8cb;</i>&nbsp;&nbsp;<span>ServicesMonitor</span>
            	<span class="pull-right-container">
            		<i class="fa fa-angle-left pull-right"></i>
            	</span>	
            	</a>
            	<ul class="treeview-menu menu-open">
					<li>
						<a href="../kafkaMonitor/services-list.html"><i class="fa fa-circle-o iconfont">&#xe601;</i>Service List</a>
					</li>
				</ul>
            </li> -->
							<li class="active"><a
								href="../dist/htmls/zkMonitor/zookeeper-index.html"><i
									class="iconfont">&#xe6f0;</i>&nbsp;&nbsp;<span>ZookeeperMonitor</span></a></li>
						</ul></li>

				</ul>
			</section>
			<!-- /.sidebar -->
		</aside>

		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Main content -->
			<section class="content">
				<div id="content">
					<section class="content-header">
						<h1>KafkaMonitor</h1>
						<ol class="breadcrumb">
							<li><a href=""> <i class="iconfont">&#xf0068;</i>
							</a></li>
							<li class="active"><a
								href="../kafkaMonitor/kafka-index.html">KafkaMonitor</a></li>
						</ol>
					</section>
					<section class="content">
						<div class="row">
							<div class="col-sm-12 col-md-6 col-lg-6 ">
								<div class="box box-logisticalman">
									<div class="box-header with-border">
										<h3 class="box-title">Cluster Information</h3>
										<div class="box-tools pull-right">
											<button type="button" class="btn btn-box-tool"
												data-widget="remove">
												<i class="fa fa-times iconfont">&#xe619;</i>
											</button>
										</div>
										<div class="box-body">
											<table ng-controller="zkCtrl" id="example2"
												class="table table-bordered table-hover">
												<thead>
													<tr>
														<th>Zookeepers</th>
														<th ng-bind="zkIps"></th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<th>Version</th>
														<th ng-bind="version"></th>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>

							<div class="col-sm-12 col-md-6 col-lg-6">
								<div class="box box-logisticalman">
									<div class="box-header with-border">
										<h3 class="box-title">Cluster Summary</h3>
										<div class="box-tools pull-right">
											<button type="button" class="btn btn-box-tool"
												data-widget="remove">
												<i class="fa fa-times iconfont">&#xe619;</i>
											</button>
										</div>
										<div class="box-body">
											<table id="example2" class="table table-bordered table-hover">
												<thead>
													<tr>
														<th>Brokers</th>
														<th><a href="../kafkaMonitor/kafka-brokers.html">3</a></th>
														<th>Topics</th>
														<th><a href="../kafkaMonitor/kafka-topiclist.html">8</a></th>
													</tr>
												</thead>
												<tbody>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-lg-3 col-xs-6">
								<!-- small box -->
								<div class="small-box bg-aqua">
									<div class="inner">
										<h3>3</h3>
										<p>Brokers</p>
									</div>
									<div class="icon" style="top: -25px;">
										<i class="kafka-iconfont">&#xe602;</i>
									</div>
									<a href="../kafkaMonitor/kafka-brokers.html"
										class="small-box-footer">View Details <i
										class="fa fa-arrow-circle-right toright-iconfont">&#xe652;</i></a>
								</div>
							</div>
							<!-- ./col -->
							<div class="col-lg-3 col-xs-6">
								<!-- small box -->
								<div class="small-box bg-green">
									<div class="inner">
										<h3>8</h3>
										<p>Topics</p>
									</div>
									<div class="icon" style="top: -25px;">
										<i class="kafka-iconfont">&#xe60d;</i>
									</div>
									<a href="../kafkaMonitor/kafka-topiclist.html"
										class="small-box-footer">View Details <i
										class="fa fa-arrow-circle-right toright-iconfont">&#xe652;</i></a>
								</div>
							</div>
							<!-- ./col -->
							<div class="col-lg-3 col-xs-6">
								<!-- small box -->
								<div class="small-box bg-yellow">
									<div class="inner">
										<h3>3</h3>
										<p>Producers</p>
									</div>
									<div class="icon" style="top: -25px;">
										<i class="kafka-iconfont">&#xec83;</i>
									</div>
									<a href="../kafkaMonitor/kafka-producer.html"
										class="small-box-footer">View Details <i
										class="fa fa-arrow-circle-right toright-iconfont">&#xe652;</i></a>
								</div>
							</div>
							<!-- ./col -->
							<div class="col-lg-3 col-xs-6">
								<!-- small box -->
								<div class="small-box bg-red">
									<div class="inner">
										<h3>5</h3>
										<p>Consumers</p>
									</div>
									<div class="icon" style="top: -25px;">
										<i class="kafka-iconfont">&#xe622;</i>
									</div>
									<a href="../kafkaMonitor/kafka-consGroups.html"
										class="small-box-footer">View Details <i
										class="fa fa-arrow-circle-right toright-iconfont">&#xe652;</i></a>
								</div>
							</div>
							<!-- ./col -->
						</div>
					</section>
				</div>
			</section>

			<!-- /.content -->
		</div>
</body>
<!-- ./wrapper -->
<!-- jquery -->
<script src="../dist/js/common/jquery.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="/kafka-zk-manager/dist/plugins/jQueryUI/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
	$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.6 -->
<script src="../dist/js/common/bootstrap.js"></script>

<!-- daterangepicker -->
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="../dist/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="../dist/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script
	src="../dist/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="../dist/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../dist/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/common/app.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../dist/js/common/demo.js"></script>
<script>
	var app = angular.module('kafka-app', []);
	app.controller('zkCtrl', function($scope, $http) {
		$http.get("/kafka-zk-manager/kz/baseInfo").success(function(data) {
			console.log(data)
			$scope.zkIps = data.zkIps;
			$scope.version = data.version;
		});
	});
</script>


</html>
